<template>
    <div>
        <div v-for=" (item,index) in package.value">
            <component :is='item.type' :ref="item.event" :event="item.event" :key="index" :package="item.value"
                       @[item.event]="events"></component>
        </div>
    </div>
</template>

<script>
    import Search from './list/search'
    import Table from './list/table'
    import Title from './list/title'
    import Bth from './list/bth'
    // import Data from './page'
    export default {
        name: 'buyersManage',

        components: {
            Table,
            Search,
            Title,
            Bth,
        },

        data() {
            return {
                test: "Search",
                tableData: [],
                pageSize: 8,
                total: 0,
                pageNo: 1,
                package: {},
                condition: {},
                searchCondition: {},
                cid:''

            }
        },
        methods: {
            getRawConfig() { /* 成功true 失败false */
                return new Promise(resolve => {
                    const mockData = {
                        'page': require('./page').default,
                    }
                    if (!mockData[this.$route.name.match(/[^/]+(?!.*\/)/)[0]]) return resolve(null)
                    console.log(mockData[this.$route.name.match(/[^/]+(?!.*\/)/)[0]])
                    resolve(mockData[this.$route.name.match(/[^/]+(?!.*\/)/)[0]])
                })
            },
            search(val) {
                console.log('我是第一个搜索')
                this.$refs.Table[0].search(val)
            },

            events(event, val) {
                switch (event) {
                    case 'Search' :
                        this.search(val)
                        break;

                }
            }

        },
        async created() {

            const rawConfig = await this.getRawConfig()
            Object.assign(this.package, rawConfig) //
            this.$forceUpdate()
        },
        mounted() {

            // this.$on('search', function(val){
            //     console.log('21')
            // })
        },

        activated() {
            // this.init()
        }
    }
</script>

<style scoped lang="scss">
    .search-wrapper {
        display: flex;
        justify-content: space-between;
    }

</style>
